require(['./config'],()=>{
   require(['template','request','header','footer','zoom','fly'],(template,request,header)=>{
                                                              //接收的是header.js中返回的Header()实例(new Header())
      class Detail{
         constructor(){
            // console.dir($)
            this.init()
            this.addToCart()
         }
         init(){
            //取id
            const id = window.location.search.slice(4)
            request.getDetail(id).then(resp=>{
               console.log(resp)
               if(resp.code === 200){
                  const { detail } = resp.data;
                  // const detail = {...resp.data.detail,id}----->rap2的写法
                  const {id,title,photo,saleNum,descContentList,accessoryHints,recComment,couponValue
                  }=detail
                  const originPrice =detail.originPrice+Number(50),
                        price = detail.price+Number(50)
                  this.detail={id,title,price,photo,saleNum,descContentList,accessoryHints,recComment,
                     originPrice,couponValue
                  }
                  $('#detail').append(template('detailTemplate',{...this.detail}))
                  //数据渲染完成之后才能调用zoom()
                  this.zoom()
               }
            })
         }
         zoom(){
            $('.zoom-normal-image').elevateZoom({
               gallery: 'detail-pic-small',
            })
         }
         addToCart(){
            $('#detail').on('click','#add-to-cart-btn',e =>{
               //抛物线飞入效果
               this.fly(e)
               //把this.detail加入购物车，用来存localstorage
               //先取出来，如果有值则应该追加当前数据，再重新存一遍覆盖之前的
               let cartList = localStorage.getItem('cart')
               if(cartList){
                  //代表已经存过购物车
                  cartList = JSON.parse(cartList)
                  //判断已经存过的数据里是否有当前商品
                  const isExist = cartList.some(cart =>{
                     return cart.id === this.detail.id
                  })
                  if(isExist){
                     //代表当前商品已经存在于localstorage,也就相当于存在于购物车
                     //一般如果要修改数组里的元素，用map,得到一个新的数组
                     cartList = cartList.map( cart =>{
                        if(cart.id === this.detail.id) cart.num++
                        return cart
                     })
                  }else{
                     //购物车里没有当前商品
                     cartList.push({
                        id: this.detail.id,
                        title:this.detail.title,
                        price: this.detail.price,
                        photo: this.detail.photo,
                        num:1,
                        checked: true //新加入的商品默认选中
                     })
                  }
                  localStorage.setItem('cart',JSON.stringify(cartList))
               }else{
                  //第一次存的情况
                  localStorage.setItem('cart',JSON.stringify([{
                     id: this.detail.id,
                     title:this.detail.title,
                     price: this.detail.price,
                     photo: this.detail.photo,
                     num:1,
                     checked: true

                  }]))
               }
            })
         }
         fly(e){
            $(`<img src="${this.detail.photo[0].url}" style="width:20px;height:20px;">`).fly({
               start:{
                 left: e.clientX,  //开始位置（必填）#fly元素会被设置成position: fixed
                 top: e.clientY,  //开始位置（必填）
               },
               end:{
                 left: 1200, //结束位置（必填）
                 top: 160,  //结束位置（必填）
                 width: 0, //结束时高度
                 height: 0, //结束时高度
               },
               autoPlay: true, //是否直接运动,默认true
               speed: 1.1, //越大越快，默认1.2
               vertex_Rtop:100, //运动轨迹最高点top值，默认20
               onEnd: function(){
                  this.destroy()
                  //修改购物车商品数量
                  header.calcCartNum()
               } //结束回调
           });
         }
      }
      new Detail()
   })
})